<template>
  <div>
    <el-row>
      <ul class="layerSwitches">
        <li>
          <el-switch
            v-model="taskListSwitch"
            @change="triggerSwitch(e, 'taskList')"
          /><span> 任务单</span>
        </li>
        <li><el-switch v-model="shelfSwitch" /><span> 货架图层</span></li>
        <li><el-switch v-model="vehicleSwitch" /><span> 车辆图层</span></li>
        <li><el-switch v-model="taskPathSwitch" /><span> 任务图层</span></li>
        <li><el-switch v-model="nodeHotspotSwitch" /><span> 热点图层</span></li>
      </ul>
    </el-row>
  </div>
</template>

<script>
import api from "@/utils/api";
export default {
  name: "LayerSwitch",
  data() {
    return {
      taskListSwitch: true,
      shelfSwitch: true,
      vehicleSwitch: true,
      taskPathSwitch: true,
      nodeHotspotSwitch: true,
    };
  },
  mounted() {
    api.getAllDataBaseInfo().then((res) => console.log(res.data));
  },
  methods: {
    triggerSwitch(e, type) {
      console.log(type);
      console.log(e);
    },
  },
};
</script>

<style scoped>
.layerSwitches {
  position: fixed;
  margin-left: 1%;
  bottom: 25px;
  z-index: 100;
}
.layerSwitches li {
  padding: 3px 10px;
  font-family: Microsoft YaHei;
  font-size: 21px;
}
</style>
